<!doctype html>
<html>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width initial-scale=1'>
  <title>我的项目汇总</title>
  <link rel="stylesheet" href="https://a-cai.gitee.io/docsthemes/html-style/yige.css">
<script src="https://a-cai.gitee.io/docsthemes/highlightjs/highlight.min.js"></script>
<link rel="stylesheet" href="https://a-cai.gitee.io/docsthemes/highlight-style/atom-one-dark.css">
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://a-cai.gitee.io/docsthemes/autoSpacing/pangu.min.js"></script>
<script>
  hljs.initHighlightingOnLoad();
	document.addEventListener('DOMContentLoaded', () => {
    pangu.autoSpacingPage();
  });
</script>
</head>

<body>
  <h1>我做过的项目</h1>
  <p>关于我大学时期做过的项目</p>
  <p>我抽时间整理了一下，把项目部署在 Gitee 上。</p>
  <h2>1、PC端（电商类）：</h2>
  <h3>1.1 京东</h3>
  <p>仿京东主页、登录页注册页。</p>
  <p>这是在学校的时候做的项目，所有代码都是自己完成的。</p>
  <blockquote>
    <p>项目展示地址：</p>
    <p><a href='./projects/pc-jd/index.html' target='_blank'
        class='url'>https://a-cai.gitee.io/myprojects/projects/pc-jd/</a></p>
  </blockquote>
  <h3>1.2 新浪积分商城：</h3>
  <p>和京东类似，短学期项目，独立完成。</p>
  <blockquote>
    <p>项目展示地址：</p>
    <p><a href='./projects/sina-jf/index.html' target='_blank'
        class='url'>https://a-cai.gitee.io/myprojects/projects/sina-jf/</a></p>
  </blockquote>
  <h3>1.3 华为商城（使用 vue 实现的页面）</h3>
  <p>是短学期项目，我个人负责的是华为商城服务页：</p>
  <p>点击预览：<a href='./projects/hw-help/hw.png'>👉最终实现效果长图</a></p>
  <h2>2、移动端：</h2>
  <p>电脑上的书签太多，我索性写了个导航页，里面汇总了我常用的书签网址。</p>
  <p>采用 grid 布局和 flex 布局，优先兼顾移动设备，然后适配了大屏的 PC 端，搜索功能调用了 Bing 的 api。</p>
  <blockquote>
    <p>地址：</p>
    <p><a href='http://www.lovebug.cn' target='_blank' class='url'>http://www.lovebug.cn</a> 或 <a
        href='http://lovebug.cn' target='_blank' class='url'>http://lovebug.cn</a></p>
  </blockquote>
  <h2>3、微信小程序：</h2>
  <p>说明：</p>
  <p>ProToDo 是我做的一个简单的待办事项，因为我觉得现有的 ToDoList 都不太符合我的喜好，所以参考了一些项目的自己盘了一个，打算放在自己的公众号里。</p>
  <p>不过审核被拒了，理由是：小程序涉及提供备忘录、日记、记事服务，备忘录等属个人主体小程序未开放类目，建议申请企业主体小程序。（因为电脑上展示不了，所以我放几张图吧）</p>
  <p><img src="./projects/wx-todo/1.png" referrerpolicy="no-referrer" alt="wx-todo-pic1" title="wx-todo-pic1"></p>
  <p><img src="./projects/wx-todo/2.png" referrerpolicy="no-referrer" alt="wx-todo-pic2" title="wx-todo-pic2"></p>
  <p><img src="./projects/wx-todo/3.png" referrerpolicy="no-referrer" alt="wx-todo-pic3" title="wx-todo-pic3"></p>
  <h2>4、其他：</h2>
  <h3>4.1中英文空格排版：</h3>
  <p>因为平时写文档的时候总是避免不了中英文数字混排，为了使排版看起来更加舒适不显得拥挤，所以我使用简单的正则表达式替换，写了一个小工具来给中英文之间加一个空格，包括一些专有名词的矫正，受启发于 pangu.js 和阮一峰的网络日志。
  </p>
  <blockquote>
    <p>地址：<a href='https://a-cai.gitee.io/pb' target='_blank' class='url'>https://a-cai.gitee.io/pb</a></p>
  </blockquote>
  <h3>4.2 mdnice 排版主题设计</h3>
  <p>应 mdnice 开发者的邀请，为 markdown 排版工具写了三个 css 主题。</p>
  <p>地址：<a href='https://editor.mdnice.com/' target='_blank' class='url'>https://editor.mdnice.com/</a></p>
  <p>（红绯、前端之巅、蔷薇紫 三个是我设计的，随着编辑器的迭代，现在部分主题需要登录才能查看。）</p>
  <h3>4.3 网页技术文档样式</h3>
  <p>通常，我们需要写一些说明文档放在网页上，但是默认的我又不喜欢，因此我自定义了一套 css 样式，每次我只需要使用 markdown 把文档写好，导出为纯 HTML 文件，再在 html
    引入样式文件，即可统一文档样式了。（支持代码高亮、数学公式 MathJax 语法、能在中英文数字中自动加入空格）</p>
  <blockquote>
    <p>项目地址：</p>
    <p><a href='https://a-cai.gitee.io/docsthemes/' target='_blank' class='url'>https://a-cai.gitee.io/docsthemes/</a>
    </p>
  </blockquote>
  <h2>5、我的个人博客地址：</h2>
  <p>基于 Hexo 搭建的静态博客，上面是我搜罗的一些前端面试习题。</p>
  <blockquote>
    <p>项目展示地址：</p>
    <p><a href='https://a-cai.gitee.io/blog/' target='_blank' class='url'>https://a-cai.gitee.io/blog/</a></p>
  </blockquote>
  <h2>6、我的个人网站：</h2>
  <p>采用阿里云服务器，CentOS 系统，导航页目前就是部署在该服务器上的。</p>
  <p>（由于目前云服务器已到期，所以目前打不开了。）</p>
  <p>地址：<a href='https://www.lovebug.cn' target='_blank' class='url'>https://www.lovebug.cn</a> 或 <a
      href='https://lovebug.cn' target='_blank' class='url'>https://lovebug.cn</a></p>
  <h2>7、中国传统色彩</h2>
  <p>这个项目是我买了一本配色书籍：《中国传统色彩》后，由于很喜欢里面的配色，于是根据书中的配色做了这个网站：</p>
  <p><a href='https://a-cai.gitee.io/chinese-colors/colorList.html' target='_blank' class='url'>https://a-cai.gitee.io/chinese-colors</a></p>  
  <p>&nbsp;</p>
</body>

</html>